<template>
	<view class="main">
		<!-- 顶部滑动导航 -->
		<u-navbar :is-back="false" :border-bottom="false" :background="{backgroundColor: '#d4237a'}">
			<view class="nav">
				<view @click="exit" class="l">
					<u-icon name="arrow-down" color="#fff" size="40rpx"></u-icon>
				</view>
				<view class="topTabs">
					<view v-for="(item, index) in tabs" :key="item.name" @click="changeTab(index)" class="item">
						<view :class="index === curTab ? 'active' : ''">{{item.name}}</view>
						<u-icon v-if="index === curTab" name="arrow-down-fill" color="#fff" size="16rpx"></u-icon>
					</view>
				</view>
				<view class="r">
		
				</view>
			</view>
		</u-navbar>
		<!-- 滑动主体内容、页面内容 -->
		<swiper class="swiperBox" :current="curSwiper" duration="200" @animationfinish="animationfinish">
			<!-- 歌曲 -->
			<swiper-item class="swiperItem musicPage">
				musicPage
			</swiper-item>
			<!-- 歌词 -->
			<swiper-item class="swiperItem lyricPage">
				lyricPage
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "music-player",
		data() {
			return {
				tabs: [
					{
						name: '歌曲'
					},
					{
						name: '歌词'
					}
				],
				curTab: 0,
				curSwiper: 0,
			}
		},
		methods: {
			// 退出
			exit(){
				console.log('收起播放器页面');
			},
			// tab栏切换
			changeTab(index) {
				// console.log(index);
				this.curTab = index;
				this.curSwiper = index;
			},
			// 滑动swiper的滑动动画结束
			animationfinish(e) {
				let current = e.detail.current;
				this.curSwiper = current;
				this.curTab = current;
			},
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.topTabs {
			color: #aeaeae;
			font-size: 30rpx;
			min-height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item{
				padding: 20rpx 30rpx 0 30rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.active{
				color: #fff;
			}
		}
		.l {
			margin-left: 40rpx;
			width: 40rpx;
		}
		.r {
			margin-right: 40rpx;
			width: 40rpx;
		}
	}
	
	.swiperBox {
		height: calc( 100vh - 44px );
		background-color: $xj-theme;
		color: #fff;
	}
</style>
